<template>
  <div class="todo-info">
    <span class="total">{{ total }} items left</span>
    <div class="tab">
      <a
        href="#"
        v-for="(state, index) in states"
        :key="index"
        :class="state == current ? 'current' : ''"
        @click="handleClick(state)"
        >{{ state }}</a
      >
    </div>
    <!-- 清除已完成：子组件触发自定义事件del -->
    <button @click="$emit('del')">Clear Completed</button>
  </div>
</template>

<script>
export default {
  name: 'TodoInfo',
  props: {
    total: {
      type: Number,
    },
  },
  data() {
    return {
      states: ['all', 'active', 'completed'],
      current: 'all', // 保存当前状态
    };
  },
  methods: {
    handleClick(s) {
      this.current = s;
      this.$emit('toggle', s)
    },
  },
};
</script>

<style lang="stylus">
@import '~styles/theme.styl';

.todo-info
  display: flex
  justify-content: space-between
  align-items: center
  height: 30px
  padding: 5px 10px
  border-top: 1px solid rgba(0, 0, 0, 0.1)
  .total
    color: $red
  .tab
    display: flex
    justify-content: space-between
    width: 200px
    a
      padding: 5px 10px
      border: 1px solid $lightred
      color: #000
      text-decoration: none
      border-radius: 5px
      &.current
        background-color: $lightred
        color: #fff
  button
    padding: 5px 10px
    height: 30px
    background-color $green
    color: #fff
    outline: none
    border: none
    border-radius: 5px
    cursor pointer
</style>
